<template>
	<div>
		<el-card>

			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动设置</el-breadcrumb-item>
				<el-breadcrumb-item>活动规则</el-breadcrumb-item>
			</el-breadcrumb>

			<el-tabs v-model="activeName" type="border-card">
				<el-tab-pane label="活动规则" name="five">
					<el-table :data="rechargeRuletable" border style="width: 100%;margin-top: 10px;" height="690"
						:header-cell-style="{ background: '#409EFF', color: '#FFF' }">
						<el-table-column label="规则" prop="ruleContent"> </el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-tag type="success" v-if="scope.row.ruleFlag == '0'">储值金额规则</el-tag>
								<el-tag type="success" v-else-if="scope.row.ruleFlag == '1'">全年免疫活动规则</el-tag>
								<el-tag type="success" v-else-if="scope.row.ruleFlag == '2'">分享海报活动规则</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="editRuleHandle(scope.row)">修改</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>

				<el-tab-pane label="储值金额列表" name="sed">
					<div>
						<el-button size="small" icon="el-icon-plus" @click="addShopRule(0)">添加</el-button>
						<el-button size="small" icon="el-icon-delete" @click="updateHandleRecharge(3)">删除</el-button>
					</div>
					<el-table :data="rechargeTableList" @selection-change="selectRechargeChange" border
						style="width: 100%;margin-top: 10px;" height="690"
						:header-cell-style="{ background: '#409EFF', color: '#FFF' }">
						<el-table-column type="selection"> </el-table-column>
						<el-table-column label="标识" prop="storedId" width='100'> </el-table-column>
						<el-table-column label="充值金额(元)" prop="storedMoney"> </el-table-column>
						<el-table-column label="用户返利比例(%)" prop="storedMine"> </el-table-column>
						<el-table-column label="分享者返利比例(%)" prop="storedShare"> </el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="奖项设置" name="second">
					<div style="margin-bottom:8px;">
						<el-button size="small" icon="el-icon-plus" @click="addShopRule(1)">添加</el-button>
						<el-button size="small" icon="el-icon-delete" @click="delHandle()">删除</el-button>
					</div>
					<el-table :data="roleList" @selection-change="roleSelection" border height="680"
						:header-cell-style="{ background: '#409EFF', color: '#FFF' }">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column label="编号" prop="storedId" width="60"></el-table-column>
						<el-table-column label="奖金(元)" prop="storedMoney"></el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>

			<el-dialog title="添加" :visible.sync="addDia" width="30%">
				<el-form ref="formMoney" :model="ruleForm" label-width="80px">
					<el-form-item label="金额" prop="storedMoney"
						:rules="{ required: true, message: '输入金额', trigger: 'change' }">
						<el-input v-model="ruleForm.storedMoney" clearable style="width:220px;" placeholder="输入金额">
							<template slot="append">元</template>
						</el-input>
					</el-form-item>

					<template v-if="storedFlag == 0">
						<el-form-item label="用户返利" prop="storedMine"
							:rules="{ required: true, message: '输入用户返利比例', trigger: 'change' }">
							<el-input v-model="ruleForm.storedMine" placeholder="输入用户返利比例" clearable
								style="width:220px;">
								<template slot="append">%</template>
							</el-input>
						</el-form-item>
						<el-form-item label="邀请返利" prop="storedShare"
							:rules="{ required: true, message: '输入邀请返利比例', trigger: 'change' }">
							<el-input v-model="ruleForm.storedShare" clearable style="width:220px;"
								placeholder="输入邀请返利比例">
								<template slot="append">%</template>
							</el-input>
						</el-form-item>
					</template>



				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="cancelhandle">取 消</el-button>
					<el-button type="primary" @click="submitHandle">确 定</el-button>
				</span>
			</el-dialog>

			<el-dialog title="编辑相关规则" :visible.sync="addRule" width="30%">
				<div class="tipText">注*：{{ str }}</div>
				规则：
				<el-input type="textarea" :rows="10" v-model="editObj.ruleContent" clearable style="margin-top: 16px"
					placeholder="请输入规则"></el-input>
				<span slot="footer" class="dialog-footer">
					<el-button @click="cancelRulehandle">取 消</el-button>
					<el-button type="primary" @click="submitRuleHandle">确 定</el-button>
				</span>
			</el-dialog>


		</el-card>
	</div>
</template>

<script>

import {

	addRule,
	listRules,
	listStored,
	addStored,
	deleteStored,

	updateStorage,
	updateRules
} from "network/rechargeRule";
import {
	listShareRule,
	addShareRuleDouble, delShareRuleDouble
} from "../../network/shareRule";

export default {
	data() {
		return {
			checkList: [],

			activeName: 'five',
			str: '换行请输入 </br>',
			addDia: false,
			ruleForm: [
				{
					storedMoney: '',
					storedMine: '',
					storedShare: '',
				}
			],
			jiang: {},
			rechargeTableList: [], //中汇储值金列表
			rechargeRuletable: [],//中汇 活动规则
			selectShopId: 3522 || sessionStorage.shop_id,
			selectReList: [],
			editObj: '',
			addRule: false,
			roleList: [],
			editRoleAuths: false,
			storedFlag: 0,// 0  储值金  1 奖金
		}
	},
	components: {

	},
	methods: {
		cancel() {
			this.editRoleAuths = false
			this.$refs.formRef.resetFields();

		},
		used() {
			this.addDia = true;
			this.storedFlag = 1
		},
		updateJiang() {
			console.log(this.jiang)
			addShareRuleDouble(this.jiang).then(res => {
				if (res) {
					this.$message.info("操作成功");
					this.editRoleAuths = false;
					this.getList();
				} else {
					this.$message.info("操作失败");
				}
			});
		},
		// 删除 奖项
		delHandle() {
			console.log(this.selectShareId);
			if (this.selectShareId == '') {
				this.$message.warning('请选择要删除的数据')
				return
			}
			delShareRuleDouble({
				ids: this.selectShareId
			}).then(res => {
				if (res.flag) {
					this.$message.success('删除成功')
					this.getList()
				}
			})

		},
		editRoleAuth(row) {
			console.log(row)
			this.jiang = row;
			this.editRoleAuths = true;
		},
		editRuleHandle(obj) {
			this.addRule = true
			this.editObj = obj
		},
		roleSelection(val) {
			console.log(val);
			this.selectShareId = ''
			val.forEach(item => {
				this.selectShareId += item.shareId + ','
			});
		},
		submitRuleHandle() {

			if (this.editObj.ruleContent == '') {
				this.$message.warning('请输入规则')
				return
			}


			console.log(this.editObj);

			addRule(this.editObj).then(res => {
				if (res.flag) {
					this.getRuleList()
					this.cancelRulehandle()
				}
			})
		},
		cancelRulehandle() {
			this.addRule = false
			this.editObj = ''
		},
		getRuleList() {
			this.rechargeRuletable = []
			listRules().then(res => {
				if (res.flag) {
					this.rechargeRuletable.push(...res.data)
				}
			})
		},



		addShopRule(flag) {
			this.addDia = true
			this.storedFlag = flag
		},

		cancelhandle() {
			this.addDia = false
			this.ruleForm = [
				{
					storedMoney: '',
					storedMine: '',
					storedShare: '',
				}
			]
			this.$refs.ruleForm.resetFields()
		},
		submitHandle() {
			this.$refs.formMoney.validate((valid) => {
				if (valid) {
					var obj = {
						storedMoney: this.ruleForm.storedMoney,
						storedMine: '',
						storedShare: '',
						shopId: sessionStorage.shop_id,
						storedFlag: this.storedFlag,
					}

					if (this.storedFlag == 0) {
						obj.storedMine = this.ruleForm.storedMine
						obj.storedShare = this.ruleForm.storedShare
					}


					addStored(obj).then(res => {
						if (res.flag) {
							this.$message.success('添加成功')
							this.getReList()
							this.cancelhandle()
						}
					})

				}
			});





		},

		getReList() {
			listStored({
				flag: 0
			}).then(res => {
				if (res.flag) {
					console.log(res.data);
					this.rechargeTableList = res.data
				}
			})
			listStored({
				flag: 1
			}).then(res => {
				if (res.flag) {
					console.log(res.data);
					this.roleList = res.data
				}
			})
		},


		updateHandleRecharge(status) {
			if (this.selectReList.length == 0) {
				this.$message.warning('请选择要操作的数据')
				return
			}
			var ids = '';

			this.selectReList.forEach(ele => {
				ids += ele.storedId + ','
			})

			console.log(this.selectReList);
			console.log(ids);
			if (status == 3) {
				deleteStored({
					ids
				}).then(res => {
					if (res.flag) {
						this.$message.success('删除成功')
						this.getReList()
					} else {
						this.$message.warning('删除失败')
					}
				})
			} else {
				updateStorage({
					ids,
					status
				}).then(res => {
					if (res.flag) {
						this.$message.success('操作成功')
						this.getReList()
					} else {
						this.$message.warning('操作失败')
					}
				})
			}
		},
		selectRechargeChange(val) {
			this.selectReList = val
		},
	},
	created() {
		this.getRuleList()
		this.getReList()
	}
}
</script>

<style scoped>
.tipText {
	padding-bottom: 10px;
	padding-left: 130px;
	color: red;
}

.lineBox {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}

.lineBox>div>.el-input {
	margin: 0 16px;
}
</style>